<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="`标签需求饼状图---${situation.name}`"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="pie-dialog"
    width="60%"
    :before-close="beforeClose"
    @closed="clearDialog"
    v-dialogMove
  >
    <div id="require-chart" class="require-chart"></div>
    <span slot="footer">
      <el-button type="primary" @click="beforeClose()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      situation: {
        type: 1,
        name: '全部'
      },
      requireChart: null,
      dialogVisible: false
    }
  },
  methods: {
    showDialog(situation) {
      this.situation = situation
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astTagRequireManager/pieData/${this.situation.type}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.length) {
            this.dialogVisible = true
            this.$nextTick(() => {
              this.requireChart = echarts.init(document.getElementById('require-chart'))
              let option = {
                tooltip: {
                  trigger: 'item'
                },
                series: [
                  {
                    type: 'pie',
                    data: data.data,
                    itemStyle: {
                      normal: {
                        color(params) {
                          let colorList = ['#f6d69b', '#eca6bd', '#7ac6bf', '#89c0ee', '#7783c2', '#67c23a']
                          return colorList[params.dataIndex]
                        }
                      },
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
              this.requireChart.setOption(option)
              window.addEventListener('resize', () => {
                this.requireChart.resize()
              })
            })
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clearDialog() {
      this.requireChart.clear()
      this.requireChart = null
    },
    beforeClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss">
.pie-dialog {
  .require-chart {
    height: 500px;
    text-align: center;
  }
}
</style>
